<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单列表</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../../css/animate.css" rel="stylesheet">
    <link href="../../../css/style.css" rel="stylesheet">
    <link href="../../../css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <link href="../../../js/plugins/treegrid/css/jquery.treegrid.css" rel="stylesheet">
    <style type="text/css">
        [v-clock] {
            display: none !important;
        }
    </style>
</head>

<body style="background-color: #f3f3f4;overflow: hidden;" >
    <div id="ycapp" v-cloak>
        <!-- 内容 -->
        <div class="gray-bg" >
            <div class="wrapper wrapper-content animated fadeInRight" >

                <div id="toolbar" class="btn-group" style="margin-bottom: 10px;">
                    <button v-if="hasPermission('sys:menu:save')" id="btn_add" type="button" @click="add" class="btn  btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox ">
                            <div class="ibox-content">
                                <div class="jqGrid_wrapper">
                                    <table id="table_list"></table>
                                    <div id="pager_list"></div>
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mainly scripts -->
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/plugins/layer/layer.js"></script>
    <!-- treegrid -->
    <script src="../../../js/plugins/treegrid/js/jquery.treegrid.min.js"></script>
    <script src="../../../js/plugins/treegrid/js/jquery.treegrid.bootstrap3.js"></script>
    <script src="../../../js/plugins/treegrid/extension/jquery.trregrid.extension.js"></script>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/common.js"></script>
    <script>
        window.onload = function() {
            loading();
        };
        function loading() {
            var url = baseURL + 'sysMenu/listChildren';
            var columns = [{
                title: '菜单名称',
                field: 'name'
            },{
                title: '菜单URL',
                field: 'url'
            },{
                title: '权限',
                field: 'perms',
                width : '20%'
            },{
                title : '类型',
                field : 'type',
                width : '10%',
                formatter : function(item, index) {
                    if (item.type == '0') {
                        return '<span class="label label-success">目录</span>';
                    }
                    if (item.type == '1') {
                        return '<span class="label label-primary">菜单</span>';
                    }
                    if (item.type == '2') {
                        return '<span class="label label-warning">按钮</span>';
                    }
                }
            },{
                title : '操作',
                width : '20%',
                formatter : function(row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs " href="#" mce_href="#" onclick="edit(\'' + row.Id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                    //actions.push('<a class="btn btn-info btn-xs " href="#" onclick="add(\'' + row.Id + '\')"><i class="fa fa-plus"></i>新增</a> ');
                    actions.push('<a class="btn btn-danger btn-xs " href="#" id="'+row.Id+'" onclick="remove(this)"><i class="fa fa-remove"></i>删除</a>');
                    return actions.join('');
                }
            }
            ];
            $.initTreeTable($("#table_list"),'Id', 'ParentId', columns, url, false);
        }

        var vm = new Vue({
            el:'#ycapp',
            data:{
                title:null,
                role:{}
            },
            methods: {
                add: function(){
                    vm.title = "新增";
                    vm.role = {};
                    layer_showAuto('新增','menuEdit.html');
                },
                reload: function () {
                    //Menu.table.refresh();
                    $("#table_list").bootstrapTreeTable('refresh');
                }
            }
        });

        function edit(menuId) {
            layer_showAuto('编辑','menuEdit.html?menuId='+menuId);
        }
        /*菜单管理-删除*/
        function remove(obj) {
            var removeObj = $(obj);
            var menuId = removeObj.attr("id");
            console.log(menuId);
            layer.confirm("确定要删除菜单吗？",{icon: 3, title:'提示'},function(index){
                $.ajax({
                    type : 'delete',
                    url: baseURL + "sysMenu/delete/" + menuId,
                    success : function(r) {
                        if (r.code == 0) {
                            layer.msg(r.msg, { icon: 1, time: 1000 });
                            // loading();
                            // 可以直接删除td，不影响刷新
                            removeObj.parents("tr").remove();
                        } else {
                            layer.alert(r.msg, { icon: 2, title: "系统提示" });
                        }
                    }
                });
            });
        }
    </script>
</body>
</html>
